// 动态点状背景效果
// 纯JS实现，无依赖
(function() {
    const DOTS = 120;
    const DOT_SIZE = 2.5;
    const DOT_COLOR = 'rgba(0,180,255,0.18)';
    const DOT_COLOR2 = 'rgba(255,0,180,0.13)';
    const SPEED = 0.3;
    let dots = [];
    let w, h, canvas, ctx, animId;

    function resize() {
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }

    function randomDot() {
        const color = Math.random() > 0.5 ? DOT_COLOR : DOT_COLOR2;
        return {
            x: Math.random() * w,
            y: Math.random() * h,
            vx: (Math.random() - 0.5) * SPEED,
            vy: (Math.random() - 0.5) * SPEED,
            color
        };
    }

    function draw() {
        ctx.clearRect(0, 0, w, h);
        for (let d of dots) {
            ctx.beginPath();
            ctx.arc(d.x, d.y, DOT_SIZE, 0, Math.PI * 2);
            ctx.fillStyle = d.color;
            ctx.shadowColor = d.color;
            ctx.shadowBlur = 8;
            ctx.fill();
        }
    }

    function update() {
        for (let d of dots) {
            d.x += d.vx;
            d.y += d.vy;
            if (d.x < 0 || d.x > w) d.vx *= -1;
            if (d.y < 0 || d.y > h) d.vy *= -1;
        }
    }

    function animate() {
        update();
        draw();
        animId = requestAnimationFrame(animate);
    }

    function init() {
        canvas = document.createElement('canvas');
        canvas.className = 'bg-dots-canvas';
        canvas.style.position = 'fixed';
        canvas.style.left = 0;
        canvas.style.top = 0;
        canvas.style.width = '100vw';
        canvas.style.height = '100vh';
        canvas.style.zIndex = 0;
        canvas.style.pointerEvents = 'none';
        document.body.prepend(canvas);
        ctx = canvas.getContext('2d');
        resize();
        dots = Array.from({length: DOTS}, randomDot);
        window.addEventListener('resize', resize);
        animate();
    }

    window.addEventListener('DOMContentLoaded', init);
})();
